<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div id="app">
    <button @click="flag1=!flag1">点击</button>
    <!-- <h1 v-show="flag1">v-show</h1> -->
    <h1 v-if="num==10">v-if</h1>
    <h1 v-else-if="num==11">v-else-if1</h1>
    <h1 v-else-if="num==12">v-else-if2</h1>
    <h1 v-else>v-else</h1>
</div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    // v-show和v-if都是用于节点的显示和隐藏,它们的表达式都是一个布尔值,布尔值是true节点显示
    //布尔值false,那么节点不现实

    // v-show和v-if的区别:v-if隐藏节点的时候,会在dom中移除对应节点,而v-show不会移除节点,通过display:none来控制元素的隐藏的

    //v-if的语法可以配合v-else-if和v-else来使用

    //v-else-if是有表达式的

    //v-else 没有表达式 和 v-if的关系是老死不相往来

    let vm = new Vue({
        el: "#app",
        data: {
            num: 10,
            flag1: true,
            flag2: false
        }
    })
</script>